import './index.css'
import React,{Component} from 'react'
import {Button,Input,Table,message,Pagination,Modal,Form,Select} from 'antd'
import { GithubOutlined } from '@ant-design/icons';
import {getAdminList,delAdminApi,addAdminApi} from '../../api/admin.js'

const { Option } = Select;
class Admin extends Component{
	
	constructor(props) {
		super(props)
		this.state={ //数据
			pageStart:1,//当前请求页码
			searchText:"",//搜索字段
			columns:[{
				title:"用户名",
				dataIndex:"userName",
				key:"userName"
			},{
				title:"真实姓名",
				dataIndex:"turename",
				key:"turename"
			},{
				title:"手机号",
				dataIndex:"phone",
				key:"phone"	
			},{
				title:"权限",
				dataIndex:"power",
				key:"power",
				render:text=>{
					return <a>{text=="2"?'课程管理员':'系统管理员'}</a>
				}
			},{
				title:"注册时间",
				dataIndex:"createAt",
				key:"createAt",
				render:text=>{
					return new Date(text).toLocaleString()
				}
			},{
				title:"操作",
				key:"tokenId",
				render:row=>{
					return (
					<div>
						<Button type="primary" onClick={this.eidt.bind(this,row)}>编辑</Button><Button type="danger" onClick={this.delAdmin.bind(this,row.tokenId)}>删除</Button>
					</div>
					)
				}
			}],
			visible:false,
			mytitle:"添加管理员",
			count:0,//总数据条数
			pageSize:3,//一页的条数
			adminList:[],//管理员列表数据
			UserName:"",
			Turename:"",
			Phone:"",
			Power:"",
			eidtId:"" //修改需要的id
		}
		this.handleCancel=this.handleCancel.bind(this);
		this.handleOk=this.handleOk.bind(this)
		this.add=this.add.bind(this)
		this.pageChange=this.pageChange.bind(this)
		this.seaChange=this.seaChange.bind(this)
	}
	componentDidMount(){ //组件挂载完成
		this.mygetAdminList();
	}
	async delAdmin(tokenId){ //删除管理员
		console.log(tokenId)
		var res=await delAdminApi(tokenId)
		message.info("删除成功")
		this.mygetAdminList();
	}
	pageChange(page){ //分页改变事件
		console.log(page)
		this.state.pageStart=page;
		this.setState({
			pageStart:this.state.pageStart
		})
		this.mygetAdminList();//页码改变后从新获取列表
	}
	eidt(row){ //点击编辑按钮进行赋值操作
		// 清空输入框
		console.log(row)
		this.state.UserName=row.userName;
		this.state.Turename=row.turename;
		this.state.Phone=row.phone;
		this.state.Power=row.power;
		this.state.eidtId=row.tokenId; //修改id
		this.setState({
			eidtId:this.state.eidtId,
			UserName:this.state.UserName,
			Turename:this.state.Turename,
			Phone:this.state.Phone,
			Power:this.state.Power,
			visible:true
		})
	}
	async  mygetAdminList(){ //调用获取管理员列表接口
		var res=await getAdminList({
			pageStart:this.state.pageStart,
			searchText:this.state.searchText
		})
		console.log(res)
		// 赋值请求回来的数据到state中的变量
		this.setState({
			adminList:res.data.data.list,
			count:res.data.data.count,
			pageSize:res.data.data.pageSize
		})
	}
	seaChange(e){//搜索输入框改变
		this.setState({
			searchText:e.target.value
		})
	}
	mySearch(){//点击搜索 从新获取列表
		this.mygetAdminList();
		this.setState({
			searchText:""
		})
	}
	valChange(status,e){
		console.log(status)
		if(status=="userName"){
			this.setState({
				UserName:e.target.value
			})
		}else if(status=="turename"){
			this.setState({
				Turename:e.target.value
			})
		}else if(status=="phone"){
			this.setState({
				Phone:e.target.value
			})
		}
	}
	// 下拉框的change
	powerChange(value){
		this.state.Power=value;
		this.setState({
			Power:this.state.Power
		})
	}
	 async handleOk(){ //添加管理员
		// 添加管理员接口
		var res=await addAdminApi({
			userName:this.state.UserName,
			turename:this.state.Turename,
			phone:this.state.Phone,
			password:"123456",
			power:this.state.Power
		})
		console.log(res)
		message.info("添加管理员成功");
		this.mygetAdminList();

			// 清空输入框
			this.state.UserName="";
			this.state.Turename="";
			this.state.Phone="";
			this.state.Power="";
			this.setState({
				UserName:this.state.UserName,
				Turename:this.state.Turename,
				Phone:this.state.Phone,
				Power:this.state.Power,
				visible:false
			})
	}
	handleCancel(){//点击取消
		this.setState({
			visible:false
		})
	}
	add(){
	this.setState({
		visible:true
	})
	}
	render(){
		return <div>
					<h1>管理员模块</h1>
					<div className="ser_wrap">
						<div>
							<Input onInput={this.seaChange} value={this.state.searchText}  />
							<Button type="primary" onClick={this.mySearch.bind(this)}>查询</Button>
						</div>
						<Button type="primary" onClick={this.add}>添加</Button>
					</div>
					<div className="tab_title">
						<GithubOutlined />
						<div>学员管理</div>	
					</div>
					<div className="table_wrap">
						<Table dataSource={this.state.adminList} pagination={{ position: ["none", "none"] }} columns={this.state.columns}></Table>,
						<Pagination onChange={this.pageChange} defaultPageSize={this.state.pageSize} current={this.state.pageStart}  defaultCurrent={this.state.pageStart}  total={this.state.count}></Pagination>
					</div>
					// 弹出层
					<Modal
					          title={this.state.mytitle}
					          visible={this.state.visible}
					          onOk={this.handleOk}
					          onCancel={this.handleCancel}
					        >
					  <Form  name="control-hooks" >
						  <Form.Item name="username" label="用户名" >
							<Input value={this.state.UserName} onChange={this.valChange.bind(this,'userName')}  />
						  </Form.Item>
						  <Form.Item name="truename" label="真实姓名" >
						  	<Input  value={this.state.Turename} onChange={this.valChange.bind(this,'turename')} />
						  </Form.Item>
						  <Form.Item name="phone" label="手机号" >
						  	<Input value={this.state.Phone}  onChange={this.valChange.bind(this,'phone')} />
						  </Form.Item>
						  <Form.Item name="gender" label="权限选择">
							<Select
							  placeholder="权限"
							  allowClear
							  defaultValue={this.state.Power}
							  onChange={this.powerChange.bind(this)}
							>
							  <Option value="1">课程管理员</Option>
							  <Option value="2">系统管理员</Option>
							</Select>
						  </Form.Item>
						</Form>
								
					   </Modal>
				</div>
	}

}
export default Admin

